<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <Case></Case>
    </SearchPanel>

    <div class="table-container">
      <div class="table-tools-panel table-flex-row">
        <!-- <el-button
          class="flush-btn"
          size="mini"
          icon="el-icon-refresh"
          @click="() => handleRefresh()"
          >刷新</el-button
        > -->
      </div>
      <div class="table-list-panel">
        <el-table
          ref="table"
          v-loading="tableLoading"
          size="small"
          border
          :data="tableData"
          :height="isShow ? 'calc(100vh - 450px)' : 'calc(100vh - 400px)'"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="45" fixed="left" />
          <el-table-column
            prop="overFlag"
            label="超时"
            show-overflow-tooltip
            width="70"
          >
            <template slot-scope="scope">
              <div class="overFlagBox">
                <img
                  src="@/assets/images/images1/icon1.png"
                  alt=""
                  v-if="scope.row.overFlag == '已超期'"
                />
                <img
                  src="@/assets/images/images1/icon3.png"
                  alt=""
                  v-if="scope.row.overFlag == '未超期'"
                />
                <img
                  src="@/assets/images/images1/icon2.png"
                  alt=""
                  v-if="
                    scope.row.overFlag == '即将超期' ||
                      scope.row.overFlag == '正常办理'
                  "
                />
                {{ scope.row.overFlag }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="事件编号"
            show-overflow-tooltip
            width="150"
          />
          <el-table-column
            prop="processEngine"
            label="事件id"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="sourceName"
            label="事件来源"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column
            prop="nodeNowName"
            label="当前节点名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="nodeNowDeptName"
            label="	当前处理部门"
            show-overflow-tooltip
          />
          <el-table-column
            prop="creatTime"
            label="上报时间"
            show-overflow-tooltip
            sortable
            width="130"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.creatTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryCompleteName"
            label="权责清单全称"
            show-overflow-tooltip
          />
          <el-table-column label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleUpdate(scope.row)"
                >流程</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-panel">
          <Pagination
            :total="query.total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            @pagination="initData"
          />
        </div>
      </div>
    </div>

    <!-- 弹窗框 -->
    <TaskHistoryDialog
      custom-class="custom-dialog"
      @closeDialog="dispatchDialogVisible = false"
      :dialogVisible="dispatchDialogVisible"
      :case-code="caseCode"
    />

    <!-- 督办弹窗框 -->
    <SuperviseListDialog
      custom-class="custom-dialog"
      @closeDialog="SuperviseListDialog = false"
      :dialogVisible="SuperviseListDialog"
      :case-code="caseCode"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import Case from "@/components/case";
import SuperviseListDialog from "@/views/casedeal/components/superviseListDialog";
import { parseTime } from "@/utils/index";
import { detailsUrl } from "@/utils/changeUrl";
import TaskHistoryDialog from "@/views/casedeal/components/taskHistoryDialog";
import {
  categoryType,
  industryArea,
  region,
  caseMessage,
  getAllMessage,
  queryCaseLise,
  queryEventList,
  queryEventZCaseList
} from "@/api/case.js";
import { getList } from "@/api/law/apelist";
export default {
  name: "CaseDealList",
  components: {
    Pagination,
    SearchPanel,
    TaskHistoryDialog,
    Case,
    SuperviseListDialog
  },
  data() {
    return {
      dispatchDialogVisible: false,
      SuperviseListDialog: false,
      obj: null,
      dialogType: "add",
      tableLoading: false,
      SourceTypeArr: [], // 来源
      IndustryAreaArr: [], //行业领域所有
      TitleOfPowerArr: [], //权力名称下拉框
      ChecklistArr: [], //事项清单下拉框
      statusType: 0,
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
        overFlag: null,
        // status: 0,
        id: "",
        beginTime: "",
        endTime: ""
      },
      tableData: [],
      caseCode: "",
      isShow: true,
      form: {}
    };
  },
  created() {
    this.initData();

    // 查询按钮
    this.$bus.on("formDatas", data => {
      let address = location.href.substr(
        location.href.indexOf("#") + 1,
        location.href.length
      );
      
      if (data.address == address) {
        this.tableLoading = true;
        const query = JSON.parse(JSON.stringify(this.query));
        queryEventZCaseList({
          addressCityCode: data.addressCity,
          addressCommunityCode: data.addressStreet,
          addressStreetCode: data.addressDetailedUser,
          categoryDcaCode: data.industry,
          categorySupCode: data.majorCategories,
          categorySubCode: data.subclass,
          code: data.caseCode,
          startTime: data.startTime,
          endTime: data.endTime,
          sourceCode: data.sourceCode,
          total: this.query.total,
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
          categoryCode: data.categoryCode,
          label: data.label,
          sourceCode: data.sourceCode
        })
          .then(result => {
            let { rows, code, total } = result;
            let obj = {};
            if (code == 200) {
              this.tableData = rows;
              // 计算超时
              this.tableData.forEach(item => {

                // 判断超时
                if (item.endTime) {
                  if (
                    Date.parse(item.planCompletionTime) <
                    Date.parse(item.endTime)
                  ) {
                    item.overFlag = "已超期";
                  } else {
                    item.overFlag = "未超期";
                  }
                } else {
                  if (
                    Date.parse(new Date()) <=
                      Date.parse(item.planCompletionTime) &&
                    Date.parse(new Date()) + 4 * 60 * 60 * 1000 >=
                      Date.parse(item.planCompletionTime)
                  ) {
                    item.overFlag = "即将超期";
                  } else if (
                    new Date() <= Date.parse(item.planCompletionTime)
                  ) {
                    item.overFlag = "正常办理";
                  } else {
                    item.overFlag = "已超期";
                  }
                }
              });
              this.query.total = total;
            }
            this.tableLoading = false;
          })
          .catch(() => {
            this.tableLoading = false;
          });
      }
    });
  },
  methods: {
    parseTime,
    selectionChange(selection) {},
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },

    // 登记过滤
    overTime(val) {
      this.query.status = val;
      this.statusType = val;
      this.getQueryAllListData(this.query);
    },

    // 督办列表
    superviseList(val) {
      this.SuperviseListDialog = true;
      this.$bus.emit("getsuperviseList", val);
    },
    // 查询所有案件信息
    getQueryAllListData(query) {
      this.tableLoading = true;

      queryEventZCaseList(query)
        .then(result => {
          let { rows, code, total } = result;
          if (code == 200) {
            this.tableData = rows;
            this.tableData.forEach(item => {
              // 判断超时
              if (item.endTime) {
                if (
                  Date.parse(item.planCompletionTime) < Date.parse(item.endTime)
                ) {
                  item.overFlag = "已超期";
                } else {
                  item.overFlag = "未超期";
                }
              } else {
                if (
                  Date.parse(new Date()) <=
                    Date.parse(item.planCompletionTime) &&
                  Date.parse(new Date()) + 4 * 60 * 60 * 1000 >=
                    Date.parse(item.planCompletionTime)
                ) {
                  item.overFlag = "即将超期";
                } else if (new Date() <= Date.parse(item.planCompletionTime)) {
                  item.overFlag = "正常办理";
                } else {
                  item.overFlag = "已超期";
                }
              }
            });

            this.query.total = total;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    myTime(date) {
      let arr = date.split("T");
      let d = arr[0];
      let darr = d.split("-");

      let t = arr[1];
      let tarr = t.split(".000");
      let marr = tarr[0].split(":");

      let dd =
        parseInt(darr[0]) +
        "/" +
        parseInt(darr[1]) +
        "/" +
        parseInt(darr[2]) +
        " " +
        parseInt(marr[0]) +
        ":" +
        parseInt(marr[1]) +
        ":" +
        parseInt(marr[2]);
      return dd;
    },

    formatDateTime(date) {
      let time = new Date(Date.parse(date));
      time.setTime(time.setHours(time.getHours() + 8));
      let Y = time.getFullYear() + "-";
      let M = this.addZero(time.getMonth() + 1) + "-";
      let D = this.addZero(time.getDate()) + " ";
      let h = this.addZero(time.getHours()) + ":";
      let m = this.addZero(time.getMinutes()) + ":";
      let s = this.addZero(time.getSeconds());
      return Y + M + D + h + m + s;
      // }
    },

    // 数字补0操作
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },

    // 行业领域的change事件
    industryChange(val) {
      industryArea({ parentId: val })
        .then(res => {
          this.TitleOfPowerArr = res.rows;
        })
        .catch(() => {});
    },

    // 权力名称的change事件
    powerChange(val) {
      industryArea({ parentId: val })
        .then(res => {
          this.ChecklistArr = res.rows;
        })
        .catch(() => {});
    },

    // 刷新
    handleRefresh() {
      this.clearQuery();
      this.getQueryAllListData();
    },
    // 流程
    handleUpdate(row) {
      this.caseCode = row.processEngine;
      this.dispatchDialogVisible = true;
    },
    initData() {
      const query = JSON.parse(JSON.stringify(this.query));
      this.getQueryAllListData(query);
    },
    // 详情
    handleDetail(row) {
      // sessionStorage.setItem("flushBackUrl", "/caseDetail/caseDetail3");
      // this.$router.push({
      //   name: "CaseDetail3",
      //   params: {
      //     caseCode: String(row.id),
      //     dialogType: "detail",
      //     buttonDisable: false,
      //   },
      // });
      let href_url = location.href;
      let url = href_url.match(/access_token=(\S*)&expireTime/)[1];
      let addressUrl = `${detailsUrl}/km/review/km_review_main/kmReviewMain.do?access_token=${url}&method=view&fdId=${
        row.processEngine
      }`;
      window.open(addressUrl);
    },

    // 顶部查询按钮
    handleQuery() {
      this.query.id = this.form.caseCode;
      if (this.form.reportTime) {
        this.query.beginTime =
          new Date(this.form.reportTime[0]).getTime() / 1000;
        this.query.endTime = new Date(this.form.reportTime[1]).getTime() / 1000;
      }
      this.getQueryAllListData();
    },

    clearQuery() {
      this.query = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
        overFlag: null,
        status: 0,
        id: "",
        beginTime: "",
        endTime: ""
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.overFlagBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.supervise {
  cursor: pointer;
}
.overFlagBox img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
/deep/ .pagination-container {
  padding: 0 16px;
  margin-top: 10px;
}
</style>
